<template>
  <div class="app">
    <div class="navBox">
      <ul class="ul">
        <li
          class="li"
          :class="{ 'li-activate': navIndex == item.titleId }"
          v-for="item in navList"
          :key="item.titleId"
          @click="handleNavClick(item)"
        >
          {{ item.name }}
          <div :class="{ 'navBox-li-line': navIndex == item.titleId }"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["navList"],
  data() {
    return {
      //   navList: [
      //     "全部",
      //     "箱包装饰",
      //     "户外用品",
      //     "汽车用品",
      //     "数码电器",
      //     "家具日用",
      //   ],
      navIndex: 1,
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleNavClick(item) {
      this.navIndex = item.titleId;
      this.$emit("changehandleNav", item);
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  width: 74.5%;
  height: 100%;
  //   background: #f2f2f2;
}
.navBox {
  width: 74.5%;
  background: #ffffff;
  .ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
    white-space: nowrap;
    position: relative;
    padding: 0 18px;
    box-sizing: border-box;
    .li {
      width: 200px;
      height: 100%;
      display: inline-block;
      position: relative;
      font-size: 20px;
      line-height: 34px;
      // margin-right: 20px;
      margin: 0 16%;
      .navBox-li-line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #08568d;
      }
    }
    .li:nth-child(1) {
      margin-left: 0;
    }
    .li-activate {
      color: #08568d;
    }
  }
  // 隐藏滚动条
  .ul::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 540px) {
  .app {
    width: 100%;
    height: 100%;
    //   background: #f2f2f2;
  }
  .navBox {
    width: 100%;
    height: 42px;
    background: #ffffff;
    .ul {
      width: auto;
      height: 100%;
      padding: 0;
      margin: 0 12px;
      list-style: none;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      position: relative;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      .li {
        width: auto;
        height: 100%;
        display: inline-block;
        position: relative;
        font-size: 12px;
        font-family: HarmonyOS_Sans_SC;
        color: #000000;
        opacity: 0.6;
        line-height: 42px;
        margin-right: 16px;
        .navBox-li-line {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: #000000;
        }
      }
      .li-activate {
        opacity: 0.9;
        font-family: HarmonyOS_Sans_SC_Medium;
      }
    }
    // 隐藏滚动条
    .ul::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
